<!doctype html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>比特币异常监控</title>
    <link rel="shortcut icon" href="/favicon.png">
    <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            background: #1e1e1e;
        }

        .kline-container {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .kline {
            width: 50%;
            height: 100%;
            position: relative;
        }

        #kline1,
        #kline2 {
            width: 100%;
            height: 100%;
        }

        .warning {
            display: none;
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
            line-height: 100px;
            z-index: 9999;
            background: rgba(255, 0, 0, .5);
            border-radius: 50%;
            color: #fff;
            font-size: 20px;
            -webkit-animation: blink .75s linear infinite;
            animation: blink .75s linear infinite;
        }

        .kline.active .warning {
            display: block;
        }

        @keyframes blink {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 1;
            }
            50.01% {
                opacity: 0;
            }
            100% {
                opacity: 0;
            }
        }

        @-webkit-keyframes blink {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 1;
            }
            50.01% {
                opacity: 0;
            }
            100% {
                opacity: 0;
            }
        }

        .popup-window {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 9;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, .9);
            opacity: 0;
            visibility: hidden;
            transition: all .5s;
        }

        .popup-window.is-visible {
            opacity: 1;
            visibility: visible;
        }

        .popup-content {
            background: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            padding: 50px 100px;
            border-radius: 5px;
            box-shadow: 0px 8px 46px rgba(0, 0, 0, 0.08), 0px 2px 6px rgba(0, 0, 0, 0.03);
        }

        .popup-content .form-control {
            width: 300px;
        }

        .popup-content .title {
            text-align: center;
            margin-bottom: 30px;
        }

        #confirm-button {
            margin: 30px 0 0 0;
        }
    </style>
</head>

<body>
<audio id="audio">
    <source src="/audio/di.mp3" type="audio/mp3">
</audio>
<div class="popup-window is-visible">
    <div class="popup-content">
        <h2 class="title">比特币异常监控</h2>
        <div class="form-group">
            <label for="exchange-select" class="col-form-label">交易所</label>
            <select id="exchange-select" class="form-control">
                <option value="火币Pro">火币Pro</option>
                <option value="币安">币安</option>
                <option value="OKEx">OKEX</option>
                <option value="ZB">ZB</option>
            </select>
        </div>
        <div class="form-group">
            <label for="exchange-select">交易对</label>
            <select id="currency-select" class="form-control">
                <option value="all">全部</option>
                <option value="USDT">USDT</option>
                <option value="BTC">BTC</option>
                <option value="ETH">ETH</option>
            </select>
        </div>
        <button type="button" id="confirm-button" class="btn btn-block btn-primary">确认</button>
    </div>
</div>
<div class="kline-container" id="kline-container">
    <div class="kline">
        <div class="warning"></div>
        <div id="kline1"></div>
    </div>
    <div class="kline">
        <div class="warning"></div>
        <div id="kline2"></div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://widget.aicoin.net.cn/chart/js/aicoin.js"></script>
<script>
  var dict = {
    '火币Pro': 'HUOBIPRO',
    'OKEx': 'OKEX',
    'ZB': 'ZB',
    '币安': 'BINANCE'
  }
  var exchange = '', currency = '', kline1Symbol = 'BTCUSDT', kline2Symbol = 'ETHUSDT'
  $('#confirm-button').on('click', function () {
    exchange = $('#exchange-select').val()
    currency = $('#currency-select').val()
    initChart(dict[exchange] + 'BTCUSDT', getCurrentKline())
    initChart(dict[exchange] + 'ETHUSDT', getCurrentKline())
    $('.popup-window').removeClass('is-visible')
    setInterval(getTrade, 4000)
  })

  function handleMessage (data) {
    var currentKline = getCurrentKline()
    var symbol = data.baseSymbol + data.targetSymbol
    if (symbol === kline1Symbol || symbol === kline2Symbol) return
    if (currentKline === 'kline1') {
      kline1Symbol = symbol
      $('#kline2').parent().removeClass('active')
    } else {
      kline2Symbol = symbol
      $('#kline1').parent().removeClass('active')
    }
    $('#audio')[0].play()
    $('#audio')[0].currentTime = 0
    messageTimer(symbol + data.type)
    $('#' + currentKline).parent().find('.warning').text(data.baseSymbol)
    $('#' + currentKline).parent().addClass('active')
    initChart(dict[data.exchange] + symbol, currentKline)
  }

  function getTrade () {
    $.ajax({
      url: '/trade',
      method: 'GET',
      data: {exchange: exchange, currency: currency},
      dataType: 'json',
      success: function (res) {
        if (res.code === 0) {
          res.data.list.length !== 0 && console.log(res.data.list)
          res.data.list.forEach(function (item) {
            handleMessage(item)
          })
        }
      }
    })
  }

  var getCurrentKline = (function () {
    var index = 0
    return function () {
      if (++index > 2) index = 1
      return 'kline' + index
    }
  })()

  function initChart (symbol, container) {
    new AICoin.chart({
      'symbol': symbol,
      'default_step': '60',
      'default_theme': 'dark',
      'disable_theme_change': true,
      'container': container,
      'lang': 'zh'
    })
  }

  var timer = null

  function messageTimer (title) {
    clearInterval(timer)
    var times = 0
    timer = setInterval(function () {
      if (times % 2 == 0) {
        document.title = '【新消息】' + title
      } else {
        document.title = '【　　　】' + title
      }
      times++
      if (times > 20) {
        clearInterval(timer)
        document.title = '比特币异常监控'
      }
    }, 1000)
  }
</script>
</body>

</html>